<template>
  <el-row>
    <el-col
      v-for="item in list"
      :key="item._id"
      class="property_list"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="6"
      @click.native="getDetail(item._id)"
    >
      <!-- <div class="grid-content bg-purple-light"></div> -->
      <div class="grip-property">
        <div class="img-wrapper">
          <img v-lazy="item.ImgUrls[0]" alt />
          <div class="look">
            <i class="iconfont eyes"></i>
            <span>{{item.ImgUrls.length}}</span>
          </div>
        </div>
        <h4>{{item.name}}</h4>
        <span class="price">{{item.price}}</span>
        <div>{{item.description[0]}} [more]</div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    getDetail(id) {
      this.$router.push({
        name: `detail`,
        params: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="scss">
.property_list {
  .grip-property {
    margin: 10px;
    padding: 10px 0;
    border-radius: 6px;
    background: #fff;
    height: 394px;
    overflow: hidden;
    .img-wrapper {
      position: relative;
      height: 250px;
      overflow: hidden;
      img {
        max-width: 100%;
        height: auto;
      }
      .look {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #000;
        .eyes {
          color: #99a9bf;
          margin-right: 10px;
        }
      }
    }
    .price {
      color: #2b3990;
      padding: 0 0 12px 0;
    }
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>